<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<%@ page import="org.vectrics.hibernate.ThreadProperties"%>
<%@ page import="org.vectrics.domain.Domain"%>
<%@ page import="java.util.Collection"%>
<%@ page import="java.util.List"%>
<%@ page import="org.vectrics.recruiter.RecruitServiceLocator"%>

<%@page import="com.hexacta.hrs.domain.staffing.RequirementSkills"%>
<%@page import="com.hexacta.hrs.domain.staffing.Requirement"%>
<%@page import="com.hexacta.hrs.domain.staffing.Project"%>

<%@page import="org.vectrics.cv.Skill"%>
<%@page import="org.vectrics.cv.SkillType"%>
<%@page import="org.vectrics.cv.Level"%>
<%@page import="org.vectrics.provider.CoreServiceLocator"%>
<%@page import="java.util.Iterator"%>
<%@page import="org.apache.commons.collections.Predicate"%>
<%@page import="org.apache.commons.collections.CollectionUtils"%>
<%@page import="org.vectrics.cv.PersonSkill"%>
<%@page import="org.vectrics.user.Person"%>
<%@page import="org.vectrics.cv.ExtraCertificate"%>
<%@page import="java.util.ArrayList"%>

<%@page import="org.vectrics.recruiter.struts.tag.cv.SkillsViewTag"%>
<%@page import="org.vectrics.cv.ListableSkill"%>
<%@page import="java.util.SortedMap"%>
<%@page import="java.util.SortedSet"%>
<%@page import="java.util.TreeSet"%>
<%@page import="java.util.Set"%>

<script language="JavaScript" type="text/javascript"
	src="/hrs-intranet/js/dynamicTree/DynamicTree.js"></script>
<script language="JavaScript" type="text/javascript"
	src="/hrs-intranet/js/dynamicTree/ie5.js"></script>
<link rel="stylesheet" type="text/css"
	href="/hrs-intranet/js/dynamicTree/DynamicTree.css" />
	
<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/errortag.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/TabContainerLocal.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
</head>

<link type="text/css"
	href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript"
	src="/hrs-intranet/js/cluetip/jquery.cluetip.js"></script>
<link type="text/css" href="/hrs-intranet/js/cluetip/jquery.cluetip.css"
	rel="stylesheet" />

<s:include value="errorsSection.jsp"></s:include>

<script type="text/javascript">

	function destildarAvailable() {
		document.getElementById('addonAvailable').checked = "";
		destildarRequerimiento();
	
	}
	
	function destildarNotAvailable() {
		document.getElementById('addonNotAvailable').checked = "";
		destildarRequerimiento();
	}
	
	function destildarRequerimiento() {
		if (document.getElementById('addonAvailable').checked
				|| document.getElementById('addonNotAvailable').checked) {
			document.getElementById('createRequirement').checked = false;
			document.getElementById('createRequirement').disabled = true;
		} else {
			document.getElementById('createRequirement').checked = true;
			document.getElementById('createRequirement').disabled = false;
		}
	}
	
	function hideOptionPanelDiv() {
		if (document.getElementById('panelToShow').style.visibility == 'hidden'){
			document.getElementById('panelToShow').style.visibility = 'visible';	
		} else {
			document.getElementById('panelToShow').style.visibility = 'hidden';	
		}
	}
	
	function doInit() {
		// Muestro las tablas. No las muestros hasta que se carga completa la pagina,
		//  porque si no quedaba feo visualmente.
		document.getElementById('remainingRequirementsDiv').style.visibility = 'visible';
		document.getElementById('assignmentsDiv').style.visibility = 'visible';
	}

	window.onload = doInit;

	dojo.event.topic.subscribe("/ProyectoSeleccionado", function(value, key,
			text, widget) {
		llamarAction();
	});

	function llamarAction() {
		if (dojo.widget.byId("projectsList").getText() != "") {
			document.forms[0].action = 'RequirementAssignmentRelationshipAction_listInitial';
	  		document.forms[0].submit();
			/* document.getElementById('proyectoSeleccionado').click(); */
		}
	}
	
	function setEdit(assigId,employeeId,employeeName,roleCode, roleDescription,assignmentPorcentage,comments,addOnAvailable,addOnNotAvailable,tentative, startDate, endDate){
		
		document.getElementById('assignmentIdBefore_edit').value=assigId;
		document.getElementById('selectedGanttEmployeeIdBefore_edit').value=employeeId;
		document.getElementById('selectedGanttEmployeeNameBefore_edit').value=employeeName;
		document.getElementById('employee_edit').value=employeeName;
		var rolesAutoCompleter = dojo.widget.byId("assigRoles_edit");
		rolesAutoCompleter.setAllValues(roleDescription, roleCode);
		var startDatePicker= dojo.widget.byId("startDate_edit");
		startDatePicker.setValue(new Date(startDate));
		var endDatePicker= dojo.widget.byId("endDate_edit");
		endDatePicker.setValue(new Date(endDate));
		document.getElementById('assigPercentage_edit').value=assignmentPorcentage;
		document.getElementById('assigDescription_edit').value=comments;
		document.getElementById('addonAvailable_edit').checked=addOnAvailable;
		document.getElementById('addonNotAvailable_edit').checked=addOnNotAvailable;
		document.getElementById('assignTentative_edit').checked=tentative;
		
	} 
	
	function confirmEdit(assignmenId){
		document.getElementById('selectedAssignmentId').value = assignmenId;
		document.getElementById('fromPopUp').value = true;
		document.forms[0].action = 'EmployeeAssignmentAction_editAssignmentFromPopUp';
  		document.forms[0].submit();
	return true;
	}
	
	function confirmChange(assignmenId){
		if(confirm("Are you sure you want to close it?")){
			document.getElementById('selectedAssignmentId').value = assignmenId;
			document.forms[0].action = 'RequirementAssignmentRelationshipAction_closeAssignment';
  			document.forms[0].submit();
		}
		return true;
	}
	
	function confirmDelete(assignmenId){
		if(confirm("Are you sure you want to delete it?")){
			document.getElementById('selectedAssignmentId').value = assignmenId;
			document.forms[0].action = 'RequirementAssignmentRelationshipAction_deleteAssignment';
  			document.forms[0].submit();
		}
		return true;
	}
	
	function confirmCloseRequierement(){
		if(confirm("Are you sure you want to close it?")){
			return true;
		}else{
			return false;
		}
	}
	
	function confirmDeleteRequierement(){
		if(confirm("Are you sure you want to delete it?")){
			return true;
		}else{
			return false;
		}
	}
	
</script>

<script type="text/javascript">
	function setReqSkills(selectedSkills){
		document.getElementById("requirementSkillsPopUp").value = selectedSkills;
		10;
	}
	
	
</script>


<script type="text/javascript">
<%String contextPath = request.getContextPath();

			Collection<Skill> parentSkillsAux = CoreServiceLocator
					.getPersonService().findAllParentSkill();
			Set<Skill> parentSkills = new TreeSet<Skill>(parentSkillsAux);

			// Recupero los levels
			Collection<Level> levels = CoreServiceLocator.getPersonService()
					.findAllLevels();
			

			Collection<RequirementSkills> requirementSkills = null;
			
			Skill parent = null;

			for (Skill s : parentSkillsAux) {
				if (s.getName().equals("Certificaciones de Microsoft")) {
					parent = s;
					break;
				}
			}

			request.setAttribute("parentSkills", parentSkills);
			request.setAttribute("levels", levels);%>
</script>

<script type="text/javascript">
		
	function setEditRequirement(reqId, projectId, projectName, roleCode, roleDescription, comments, startDate, endDate, reqPorcentage, 
			 requirementSkills){
		document.getElementById('requirementId').value=reqId;
		
		document.getElementById('project_edit').value=projectId;
		document.getElementById('project_edit').value=projectName;
		
		var rolesAutoCompleter = dojo.widget.byId("roles_edit");
		rolesAutoCompleter.setAllValues(roleDescription, roleCode);
		var startDatePicker= dojo.widget.byId("fromDate_req_edit");
		startDatePicker.setValue(new Date(startDate));
		var endDatePicker= dojo.widget.byId("toDate_req_edit");
		endDatePicker.setValue(new Date(endDate));
		
		document.getElementById('req_percentage_edit').value=reqPorcentage;
	 	
		
	}
</script>


<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}
	
	$(function() {
		$( "#accordion" ).accordion({
			collapsible: true,
			clearStyle: true,
			active: false
		});
		$( "#accordion" ).removeClass("ui-accordion-header");
		$( "#accordion" ).removeClass("ui-helper-reset");
		$( "#accordion" ).removeClass("ui-state-default");
		$( "#accordion" ).removeClass("ui-state-hover");
		$( "#accordion" ).removeClass("ui-corner-all");
		$( "#accordion" ).removeClass("ui-corner-top");
		$( "#accordion" ).removeClass("ui-state-active");
		$( "#accordion" ).removeClass("ui-accordion-header");
		/* ui-accordion-header ui-helper-reset  */ 
	});
	
	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 500,
			closeText: 'hide',
			height : 'auto',
			zIndex:0,
			hide: { effect: 'drop', direction: "down" },
			show: { effect: 'drop', direction: "up" },
			open: function(event, ui) {
				$(".ui-dialog-titlebar").hide();
                $(".ui-dialog-titlebar-close").hide();
    			}
		});
		
		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();
		
	});
	

</script>


<s:form cssClass="formClass">

	<s:hidden name="selectedAssignmentId" id="selectedAssignmentId"></s:hidden>
	<s:hidden name="fromPopUp" id="fromPopUp"></s:hidden>
	<s:hidden name="requirementSkillsPopUp" id="requirementSkillsPopUp"></s:hidden>
	<s:hidden name="requirementId" id="requirementId"></s:hidden>
													
	<sx:autocompleter id="projectsList" list="projectsList"
		listValue="name" searchType="startword" listKey="id"
		showDownArrow="false" keyName="selectedProjectId"
		name="selectedProjectName" valueNotifyTopics="/ProyectoSeleccionado"
		label="Project" />
	<s:submit id="proyectoSeleccionado"
		action="RequirementAssignmentRelationshipAction_listInitial"
		cssStyle="visibility: hidden" />


	<s:if test="%{project != null}">
		<table width="100%">
			<tr>
				<td colspan="2"><sx:tabbedpanel id="tabContainer"
						useSelectedTabCookie="true"
						templateCssPath="/hrs-intranet/styles/TabContainerLocal.css"
						cssStyle="z-index: 0;">

						<sx:div id="assignmentsDiv" label="Assignments"
							cssStyle="visibility: hidden;">

							<table width="100%">
								<tr>
									<td colspan="2">
										<table width="90%">
											<tr>
												<td class="ganttFilter">
													<table class="ganttFilterContent"
														style="background-color: #e2f3bf; border: 1px solid #a4b386;">
														<tr>
															<td><s:checkbox onclick="llamarAction()"
																	label="Asignado cliente" name="showAsignadoCliente"
																	cssClass="ganttContentAdjust" />
															</td>
														</tr>
													</table>
												</td>
												<td class="ganttFilter">
													<table class="ganttFilterContent"
														style="background-color: #d8f6f5; border: 1px solid #61c0bd;">
														<tr>
															<td><s:checkbox label="Add on available"
																	name="showAddOnAvailable" onclick="llamarAction()"
																	cssClass="ganttContentAdjust" />
															</td>
														</tr>
													</table>
												</td>
												<td class="ganttFilter">
													<table class="ganttFilterContent"
														style="background-color: #f5d1ad; border: 1px solid #ea8d30;">
														<tr>
															<td><s:checkbox label="Add on not available"
																	name="showAddOnNotAvailable" onclick="llamarAction()"
																	cssStyle="color:#ffffff;" cssClass="ganttContentAdjust" />
															</td>
														</tr>
													</table>
												</td>
												<td class="ganttFilter">
													<table class="ganttFilterContent"
														style="background-color: #fbfbfb; border: 1px solid #d2d2d2;">
														<tr>
															<td><s:checkbox label="Tentative"
																	name="showTentativesAssignments"
																	onclick="llamarAction()" cssClass="ganttContentAdjust" />
															</td>
														</tr>
													</table>
												</td>
												<td width="5%">&nbsp;</td>
												<td width="15%"><s:a cssClass="Add" href="#"
														id="dialog_link"
														onclick="javascript: return showDialog('#dialogAssig');">Add Assignment</s:a>
												</td>
											</tr>
											<tr>
												<td class="ganttFilter">
													<table class="ganttFilterContent">
														<tr>
															<td><s:checkbox label="Currently Assigned"
																	name="showOnlyCurrentAssigned" onclick="llamarAction()" />
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td colspan="2"><display:table id="assignmentNoAddOnList"
											name="assignmentNoAddOnList" defaultsort="8"
											defaultorder="ascending"
											requestURI="RequirementAssignmentRelationshipAction_listUsingFilterAttributesFromSession"
											class="listable" cellpadding="0" cellspacing="0"
											pagesize="10">
											<display:column property="assignedRole.description"
												title="Role" sortable="true" />
											<display:column property="startDate.time" title="Start Date"
												sortable="true" format="{0,date,dd/MM/yyyy}" />
											<display:column property="endDate.time" title="End Date"
												sortable="true" format="{0,date,dd/MM/yyyy}" />
											<display:column property="FTE" title="% FTE" sortable="true"
												format="{0,number,00} %" />
											<display:column property="employee.person.name"
												title="Assigned Resource" sortable="true" />
											<display:column
												property="employeeJobFunctionAtAssignmentDate.description"
												title="Employee Role" sortable="true" />
											<display:column property="tentative" title="Tentative"
												sortable="true" />
											<%-- <display:column property="comments" title="Comments"
												sortable="true" /> --%>
											<display:column property="availability" title="Availability"
												sortable="false" />
											<display:column title="Edit" sortable="false"
												style="width: 5%;">
												<s:a href="#" id="dialog_link"
													onclick="javascript: setEdit('%{#attr.assignmentNoAddOnList.id}','%{#attr.assignmentNoAddOnList.employee.id}','%{#attr.assignmentNoAddOnList.employee.person.name}','%{#attr.assignmentNoAddOnList.assignedRole.code}', '%{#attr.assignmentNoAddOnList.assignedRole.description}',%{#attr.assignmentNoAddOnList.assignmentPorcentage},'%{#attr.assignmentNoAddOnList.comments}',%{#attr.assignmentNoAddOnList.addOnAvailable},%{#attr.assignmentNoAddOnList.addOnNotAvailable},%{#attr.assignmentNoAddOnList.tentative}, %{#attr.assignmentNoAddOnList.startDate.timeInMillis}, %{#attr.assignmentNoAddOnList.endDate.timeInMillis}); return showDialog('#dialogEdit');">Edit</s:a>
											</display:column>
											<display:column title="Close" sortable="false"
												style="width: 5%;">
												<s:a
													href="RequirementAssignmentRelationshipAction_closeAssignment"
													onclick="javascript: if(confirmChange('%{#attr.assignmentNoAddOnList.id}')) return false">Close</s:a>
											</display:column>
											<display:column title="Delete" sortable="false"
												style="width: 5%;">
												<s:a
													href="RequirementAssignmentRelationshipAction_deleteAssignment"
													onclick="javascript: if(confirmDelete('%{#attr.assignmentNoAddOnList.id}')) return false">Delete</s:a>
											</display:column>
										</display:table>
									</td>
								</tr>
							</table>
						</sx:div>

						<sx:div id="remainingRequirementsDiv" label="Pending Requirements"
							cssStyle="visibility: hidden">

							<table width="100%">
								<tr>
									<td colspan="2" align="right">
										<s:a cssClass="Add" href="#"
														id="dialog_link"
														onclick="javascript: return showDialog('#dialogReq');">Add Requirement</s:a>
									</td>
									<td colspan="2"><s:checkbox onclick="llamarAction()"
											label="Calculate using tentatives"
											name="showTentativesRequirements" />
									</td>
									<td colspan="2"><s:checkbox onclick="llamarAction()"
											label="Current pending requirements"
											name="showOnlyCurrentRequirements" />
									</td>
									
								</tr>
								<tr>
									<td colspan="6"><s:if
											test="%{remainingRequirementsList.size()==0}">
											<table width="67%">
												<tr>
													<td><br> <br> <s:label
															label="No matches found." cssClass="formClass"></s:label>
													</td>
												</tr>
											</table>
										</s:if> <s:else>
											<display:table id="remainingRequirementsList"
												name="remainingRequirementsList" defaultsort="2"
												defaultorder="ascending"
												requestURI="RequirementAssignmentRelationshipAction_listUsingFilterAttributesFromSession"
												class="listable" cellpadding="0" cellspacing="0"
												pagesize="10">
												<display:column property="role.description" title="Role"
													sortable="true" />
												<display:column property="startDate.time" title="Start Date"
													sortable="true" format="{0,date,dd/MM/yyyy}" />
												<display:column property="endDate.time" title="End Date"
													sortable="true" format="{0,date,dd/MM/yyyy}" />
												<display:column property="porcentage" title="% FTE"
													sortable="true" format="{0,number,00} %" />
												<display:column title="Edit" sortable="false" >
													<s:a href="#" id="dialog_link"
													onclick="javascript: setEditRequirement('%{#attr.remainingRequirementsList.requirementId}',
													'%{selectedProjectId}','%{selectedProjectName}',
													'%{#attr.remainingRequirementsList.role.code}', '%{#attr.remainingRequirementsList.role.description}',
													'%{#attr.remainingRequirementsList.comments}', %{#attr.remainingRequirementsList.startDate.timeInMillis},  
													%{#attr.remainingRequirementsList.endDate.timeInMillis}, %{#attr.remainingRequirementsList.requirement.assignmentPorcentage},
													'%{#attr.remainingRequirementsList.requirement.requirementSkills}' ); 
													return showDialog('#dialogEditReq');">Edit
													
													<script type="text/javascript">
														<s:iterator value="%{#attr.remainingRequirementsList.requirement.requirementSkills}">
														document.getElementById('skill_<s:property value="skill.id"/>').value=true;
														document.getElementById('skill_<s:property value="level.id"/>').value=<s:property value="level.id"/>;
														
														</s:iterator>
													</script>
														
	
													</s:a>
													<!-- reqId, projectId, projectName, roleCode, roleEDescription, comments, startDate, endDate, assignmentPorcentage -->
												</display:column>
												<display:column title="Skills" sortable="false">
													<div id="dialogSkillsRequirement${remainingRequirementsList.requirementId}" title="Requirement`s Skills" class="toggler">
														<label><b>Requirement`s Skills</b></label>
 														<display:table id="requirementSkillsPopUp" name="${remainingRequirementsList.requirement.requirementSkills}"
 														class="listable" cellpadding="0" cellspacing="0">
															<display:column property="percentage" title="%" />
															<display:column property="skill.skillAndParentName" title="Skill" />
															<display:column property="level.name" title="Level" />
														</display:table>
														<br />		
														<div align="right">
															<input type="button" value="Close" class="btn"
																	onclick="$('#dialogSkillsRequirement${remainingRequirementsList.requirementId}').dialog('close');" />	
														</div>
													</div>	
														<a href="#" id="dialog_link"
													onclick="javascript: return showDialog('#dialogSkillsRequirement${remainingRequirementsList.requirementId}');" >
													Skills</a>
												</display:column>
												<display:column title="Close" sortable="false">
													<s:url
														action="RequirementAssignmentRelationshipAction_closeRequirement"
														var="RequirementAssignmentRelationshipAction_closeRequirement">
														<s:param name="%{#attr.remainingRequirementsList.requirementId}">
															<s:property value="requirementId" />
														</s:param>
														<s:param name="selectedProjectId">
															<s:property value="%{selectedProjectId}" />
														</s:param>
													</s:url>
													<s:a name="closeLink"
														href="%{RequirementAssignmentRelationshipAction_closeRequirement}"
														value="RequirementAssignmentRelationshipAction_closeRequirement"
														onclick="javascript: return confirmCloseRequierement()">Close</s:a>
												</display:column>
												<display:column title="Delete" sortable="false">
													<s:url
														action="RequirementAssignmentRelationshipAction_deleteRequirement"
														var="RequirementAssignmentRelationshipAction_deleteRequirement">
														<s:param name="requirementId">
															<s:property
																value="%{#attr.remainingRequirementsList.requirementId}" />
														</s:param>
														<s:param name="selectedProjectId">
															<s:property value="%{selectedProjectId}" />
														</s:param>
													</s:url>
													<s:a
														href="%{RequirementAssignmentRelationshipAction_deleteRequirement}"
														value="RequirementAssignmentRelationshipAction_deleteRequirement"
														onclick="javascript: return confirmDeleteRequierement()">Delete</s:a>
												</display:column>
												<display:column title="Search Candidates" sortable="false">
													<s:url
														action="RequirementAssignmentRelationshipAction_selectedRequirementResult"
														var="RequirementAssignmentRelationshipAction_selectedRequirementResult">
														<s:param name="requirementId">
															<s:property
																value="%{#attr.remainingRequirementsList.requirementId}" />
														</s:param>
														<s:param name="selectedProjectId">
															<s:property value="%{selectedProjectId}" />
														</s:param>
													</s:url>
													<s:a
														href="%{RequirementAssignmentRelationshipAction_selectedRequirementResult}"
														value="RequirementAssignmentRelationshipAction_selectedRequirementResult"
														>Search Candidates</s:a>
												</display:column>
											</display:table>

										</s:else>
									</td>
								</tr>
							</table>
							<s:if test="%{requirementId != null && calculateResultList != null }">
							<table width="100%" style="border-top: 1px solid #b4d58e ">
								<tr>
									<td colspan="2">
										<div style="width: 25%">
											<div id="accordion" >
												<h1><a href="#" style="font-weight: normal; text-decoration: none; font-family: arial, tahoma, verdana, sans-serif; font-size: 11px; color: #A7D34B;">
														Result Search Options</a></h1>
												<div>	
													<table>
														<tr><td>
															<s:textfield label="Availability (%): " name="disponibilityPercentage" id="disponibilityPercentage" cssStyle="border: none;"/>
															<s:textfield label="Seniority (%): " name="seniorityPercentage" id="seniorityPercentage" cssStyle="border: none;"/>
															<s:textfield label="Skills (%): " name="skillsPercentage" id="skillsPercentage" cssStyle="border: none;"/>
														</td></tr>
														<tr><td><br/></td></tr>
														<tr>
														<td>
 														<s:a cssStyle="color: #A7D34B; font-weight: normal; text-decoration: none; font-family: arial, tahoma, verdana, sans-serif; font-size: 12px;"
															href="#" id="search_link" onclick="llamarAction()"
															>Search</s:a>
														</td>
 														</tr>
 													</table>
												</div>
											</div>
										</div>
										
									</td>
								</tr>
								<tr>
									<td valign="top" align="left" width="30%">
										<table class="listable" style="background: white;">
											<thead>
											<tr><th class="sortable" colspan="2"><label><b>Requirement</b></label></th></tr>
											</thead>
											<tr class="even">
												<td><label><b>Role: </b><s:property value="selectedRequirement.requiredRol.description"/></label></td>
												<td><label><b>FTE: </b><s:property value="selectedRequirement.assignmentPorcentage"/></label></td>
											</tr>
											<tr class="even">
												<td><label><b>Start Date: </b><s:property value="selectedRequirement.formatedStartDate"/></label></td>
												<td><label><b>End Date: </b><s:property value="selectedRequirement.formatedEndDate"/></label></td>
											</tr>
											<tr>
												<td colspan="2">
													<table class="listable" style="background: white;">
															<thead>
																<tr class="even">
																<td colspan="3"><label><b>Skills: </b></label></td>
																</tr>
																<tr>
																<th class="sortable"><label><b>%</b></label></th>
																<th class="sortable"><label><b>Skill</b></label></th>
																<th class="sortable"><label><b>Level</b></label></th>
																</tr>
															</thead>
														<tbody>
														<s:iterator value="selectedRequirement.requirementSkills">
															<tr class="odd">
																<td><label><s:property value="percentage"/></label></td>
																<td><label><s:property value="skill.skillAndParentName"/></label></td>
																<td><label><s:property value="level.name"/></label></td>
															</tr>
														</s:iterator>
														</tbody>
													</table>
												</td>
											</tr>
										</table>
									</td>
									<td valign="top">
										<display:table id="calculateResultList"
												name="calculateResultList" defaultsort="6"
												defaultorder="descending"
												requestURI="RequirementAssignmentRelationshipAction_calculateSetList"
												class="listable" cellpadding="0" cellspacing="0"
												pagesize="15">
											<display:column property="employee.person.name" title="Employee" sortable="true" />
											<display:column property="employee.function.description" title="Role" sortable="true" />
											<display:column property="employee.hoursPerDay" title="Hours" />
											<display:column property="formatedAvailableDate" title="Available Date" style="width: 13%"/>
											<display:column title="Skill">
												<div id="dialogEmployeeSkills${calculateResultList.employee.id}"
														title="Employee`s Skills">
														<label><b>${calculateResultList.employee.person.name}`s Skills </b></label>
 														<display:table id="employee.person.skills" name="${calculateResultList.skills}"
 														class="listable" cellpadding="0" cellspacing="0">
															<display:column property="skill.skillAndParentName" title="Skill" />
															<display:column property="level.name" title="Level" />
														</display:table>
														<br />		
														<div align="right">
															<input type="button" value="Close" class="btn"
																	onclick="$('#dialogEmployeeSkills${calculateResultList.employee.id}').dialog('close');" />	
														</div>
													</div>	
														<a href="#" id="dialog_link"
													onclick="javascript: return showDialog('#dialogEmployeeSkills${calculateResultList.employee.id}');" >
													Skills</a>
											</display:column>
											<display:column property="result" title="Result" sortable="true" />
										</display:table>
									</td>										
								</tr>
									
							</table>
							</s:if>
						</sx:div>

					</sx:tabbedpanel></td>
			</tr>
		</table>

		<br>
		<br>
		<hr width="90%" align="left">
		<br>
	</s:if>
	<s:if test="%{project != null}">
		<jsp:include page="availableResources.jsp">
			<jsp:param name="requestURI"
				value="RequirementAssignmentRelationshipAction_listInitial" />
			<jsp:param name="addEditURI"
				value="EmployeeAssignmentAction_createNewAssignment" />
			<jsp:param name="list" value="employeeAssignmentList" />
			<jsp:param name="optionToShowInGantt" value="Project" />
			<jsp:param name="showOptionsInGantt" value="0" />
		</jsp:include>
	</s:if>

	<s:submit id="asignacionConfirmada"
		action="EmployeeAssignmentAction_confirmNewAssignment"
		cssStyle="visibility: hidden" />
</s:form>

<div id="dialogAssig" title="Create New Assignment">
	<h2>Create New Assignment</h2>
	<s:if
		test="hasPermission(permissionNameConverter.getCreateProjectAssignmentPermission())">
		<div >
		<!-- align="right" style="margin-top: 50px" -->
			<s:form cssClass="formClass">
				<sx:autocompleter id="assigEmployeeList" list="employeeList"
					listValue="person.name" searchType="startword" listKey="id"
					showDownArrow="false" keyName="selectedGanttEmployeeIdBefore"
					name="selectedGanttEmployeeNameBefore" label="Employee"
					forceValidOption="true" />
				<s:hidden name="selectedProjectId" id="selectedProjectId" />
				<s:hidden name="selectedProjectName" id="selectedProjectName" />
				<s:textfield label="Project" disabled="true"
					value="%{selectedProjectName}" cssClass="dojoComboBox" />
				<sx:autocompleter id="assigRoles" list="roles"
					listValue="description" searchType="startword" listKey="code"
					showDownArrow="false" keyName="selectedRoleCode"
					name="selectedRoleName" label="Assigned Role"
					forceValidOption="true" />
				<s:textfield label="Assignment %" name="selectedAssignmentPercentage"
					value="100" cssClass="dojoComboBox" />
				<sx:datetimepicker id="startDate" name="selectedStartDate"
					label="Start Date" displayFormat="dd/MM/yyyy"  value="%{'today'}"/>
				<sx:datetimepicker id="endDate" name="selectedEndDate"
					label="End Date" displayFormat="dd/MM/yyyy" />

				<s:textarea key="assigDescription" label="Description" rows="4"
					cols="16" cssClass="formTextAreaClass" wrap="50" maxlength="250" />
				<s:checkbox label="Addon available" name="addonAvailable"
					labelposition="inline" id="addonAvailable"
					onclick="destildarNotAvailable()" />
				<s:checkbox label="Addon not available" name="addonNotAvailable"
					id="addonNotAvailable" onclick="destildarAvailable()" />
				<s:checkbox label="Tentative" name="assignTentative" />
				<s:checkbox label="Create Project Requirement"
					id="createRequirement" name="createRequirement" />
				<s:checkbox name="fromPopUp" value="true" style="visibility:hidden;" />
				<table>
					<tr>
						<td>
							<table>
								<tr>
									<td><s:submit key="Ok" cssClass="btn"
											cssStyle="align:left" id="okbtn"
											action="EmployeeAssignmentAction_confirmNewAssignment" />
									</td>
								</tr>
							</table>
						</td>
						<td>
							<table>
								<tr>
									<td><input type="button" value="Cancel" class="btn"
										onclick="$('#dialogAssig').dialog('close');" />
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</s:form>
		</div>

	</s:if>
	<s:else>
		<br />
		<p>You don't have enough permissions to create assignments.</p>

		<input type="button" value="Close" class="btn"
			style="text-align: center"
			onclick="$('#dialogAssig').dialog('close');" />
	</s:else>
</div>



<div id="dialogEdit" title="Edit Assignment">
	<h2>Edit Assignment</h2>
	<s:if
		test="hasPermission(permissionNameConverter.getCreateProjectAssignmentPermission())">
		<div >
		<!-- align="right" style="margin-top: 50px" -->
			<s:form cssClass="formClass">
				<s:hidden name="assignmentIdBefore" id="assignmentIdBefore_edit" />
				<s:hidden name="selectedGanttEmployeeIdBefore"
					id="selectedGanttEmployeeIdBefore_edit" />
				<s:hidden name="selectedGanttEmployeeNameBefore"
					id="selectedGanttEmployeeNameBefore_edit" />
				<s:textfield label="Employee" disabled="true"
					cssClass="dojoComboBox" id="employee_edit" />
				<s:hidden name="selectedProjectId" id="selectedProjectId" />
				<s:hidden name="selectedProjectName" id="selectedProjectName" />
				<s:textfield label="Project" disabled="true"
					value="%{selectedProjectName}" cssClass="dojoComboBox" />
				<sx:autocompleter id="assigRoles_edit" list="roles"
					listValue="description" searchType="startword" listKey="code"
					showDownArrow="false" keyName="selectedRoleCode"
					name="selectedRoleName" label="Assigned Role"
					forceValidOption="true" />
				<s:textfield label="Assignment %" name="selectedAssignmentPercentage"
					cssClass="dojoComboBox" id="assigPercentage_edit" />
				<sx:datetimepicker id="startDate_edit" name="selectedStartDate"
					label="Start Date" displayFormat="dd/MM/yyyy"/>
				<sx:datetimepicker id="endDate_edit" name="selectedEndDate"
					label="End Date" displayFormat="dd/MM/yyyy" />
				<s:textarea key="assigDescription" label="Description" rows="4"
					cols="16" cssClass="formTextAreaClass" wrap="50" maxlength="250"
					id="assigDescription_edit" />
				<s:checkbox label="Addon available" name="addonAvailable"
					labelposition="inline" id="addonAvailable_edit"
					onclick="destildarNotAvailable()" />
				<s:checkbox label="Addon not available" name="addonNotAvailable"
					id="addonNotAvailable_edit" onclick="destildarAvailable()" />
				<s:checkbox label="Tentative" name="assignTentative"
					id="assignTentative_edit" />
				<s:checkbox name="fromPopUp" value="true" style="visibility:hidden;" />
				<table>
					<tr>
						<td>
							<table>
								<tr>
									<td><s:submit key="Ok" cssClass="btn" id="okbtn"
											action="EmployeeAssignmentAction_confirmNewAssignment" /> <!-- 										<input type="button" value="Ok" class="btn" -->
										<!-- 										onclick="llamarAssig()" /> -->
									</td>
								</tr>
							</table></td>

						<td>
							<table>

								<tr>
									<td><input type="button" value="Cancel" class="btn"
										onclick="$('#dialogEdit').dialog('close');" />
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</s:form>
		</div>
	</s:if>
	<s:else>
		<br />
		<p>You don't have enough permissions to edit assignments.</p>

		<input type="button" value="Close" class="btn"
			style="text-align: center"
			onclick="$('#dialogEdit').dialog('close');" />
	</s:else>
</div>

<div id="dialogReq">
	<h2>Create New Requirement</h2>
	<s:if
		test="hasPermission(permissionNameConverter.getCreateProjectAssignmentPermission())">
		<div >
		<!-- align="right" style="margin-top: 50px" -->
			<s:form cssClass="formClass">
				<s:hidden name="selectedProjectId" id="selectedProjectId" />
				<s:hidden name="selectedProjectName" id="selectedProjectName" />
				<br/>
				<s:textfield label="Project" disabled="true"
					value="%{selectedProjectName}" cssClass="dojoComboBox" />
				<sx:autocompleter id="assigRoles" list="roles"
					listValue="description" searchType="startword" listKey="code"
					showDownArrow="false" keyName="selectedRoleCode"
					name="selectedRoleName" label="Assigned Role"
					forceValidOption="true" />
					
				<sx:datetimepicker id="startDate_req" name="selectedStartDate"
					label="Start Date" displayFormat="dd/MM/yyyy"  value="%{'today'}"/>
				<sx:datetimepicker id="endDate_req" name="selectedEndDate"
					label="End Date" displayFormat="dd/MM/yyyy" />
					
				<s:textfield label="Assignment %" name="requirementPercentage"
					value="100" cssClass="dojoComboBox" />
				
				<table >
		<tr align="left">
			<th colspan="1"><label class="label">Skills:</label>
			</th>
		</tr>
		<tr>
			<td valign="top" colspan="1"><jsp:useBean id="skillForm"
					class="org.vectrics.recruiter.struts.cv.SkillForm" scope="request" />
				<table width="100%">
					<tr>
						<td valign="middle">
							<div class="DynamicTree" style="border: 1px solid #D9D9D9;">
								<div class="wrap" id="tree">

									<%
										// recorremos los skills padres - SKP1
												// Los skill se cargan solo en 3 niveles como maximo.
												for (Skill parentSkill : parentSkills) {

													if ((parentSkill.getChildSkills() != null)
															&& !parentSkill.getChildSkills().isEmpty()) {
									%>
									<div class="folder">
										<input type="checkbox" name="padre" value=""
											disabled="disabled" /><%=parentSkill.getName()%>

										<%
											// recorremos los skills hijos - SKC1

															Collection<Skill> skillsSubCategoriaAux = parentSkill
																	.getChildSkills();
															Set<Skill> skillsSubCategoria = new TreeSet<Skill>(
																	skillsSubCategoriaAux);
															for (Skill skill : skillsSubCategoria) {
																// si no tiene hijos lo dibujo
																if ((skill.getChildSkills() == null)
																		|| skill.getChildSkills().isEmpty()) {
																	if (skill.getType() == SkillType.LEVELED_TYPE) {
										%>
										<div class="doc">
											<input type="checkbox" name="skill_<%=skill.getId()%>"
												value="<%=skill.getId()%>" /><%=skill.getName()%>
											<input type="hidden" id="l_<%=skill.getId()%>" value="0" />
										</div>

										<%
											} else {
										%>
										<div class="doc boolean">
											<input type="checkbox" name="skill_<%=skill.getId()%>"
												value="<%=skill.getId()%>" /><%=skill.getName()%>
										</div>
										<%
											}
																} else {
																	//Si tiene hijos lo muestro y muestro sus hijos
										%>
										<div class="folder">
											<input type="checkbox" name="padre" value=""
												disabled="disabled" /><%=skill.getName()%>
											<%
												// recorremos los skills hijos - SKC1

																		Collection<Skill> skillsAux = skill
																				.getChildSkills();
																		Set<Skill> skills = new TreeSet<Skill>(
																				skillsAux);
																		for (Skill child : skills) {
																			// buscamos si el skill hijo lo tiene la persona para poder checkearlo o no
											%>
											<div class="doc">
												<input type="checkbox" name="skill_<%=child.getId()%>"
													value="<%=child.getId()%>" /><%=child.getName()%>
												<input type="hidden" id="l_<%=child.getId()%>" value="0" />
											</div>
											<%
												}
											%>
										</div>
										<%
											}
															} // END SKC1
										%>
									</div>
									<%
										} // END IF
												} // END SKP1
									%>
								</div>
							</div></td>
					</tr>
				</table>
				<div style="display: none;" id="divLevel">
					<select name="level" id="level">
						<%
							// recorremos y armamos los options del combo level
									for (Level level : levels) {
						%>
						<option value="<%=level.getId()%>"
						<%if (level.getName().equalsIgnoreCase("Intermediate")) {%>
							selected="selected"
							<%}%>
						><%=level.getName()%></option>
						<%
							}
						%>
					</select>
				</div> <script type="text/javascript">
					var tree = new DynamicTree("tree");
					tree.init();
				</script>
			</td>
		</tr>
		</table>
				<table>
					<tr><td><br/></td></tr>
					<tr><td>
						<table><tr><td>
									<s:submit key="Ok" cssClass="btn"
											cssStyle="align:left" id="okbtn"
											action="RequirementAction_saveRequirement" />
						</td></tr></table>
						</td><td>
							<table><tr><td>
									<input type="button" value="Cancel" class="btn"
										onclick="$('#dialogReq').dialog('close');" />
							</td></tr></table>
					</td></tr>
				</table>
			</s:form>
		</div>

	</s:if>
	<s:else>
		<br />
		<p>You don't have enough permissions to create assignments.</p>

		<input type="button" value="Close" class="btn"
			style="text-align: center"
			onclick="$('#dialogReq').dialog('close');" />
	</s:else>
</div>
 
<div id="dialogEditReq">
	<h2>Edit Requirement</h2>
	<s:if
		test="hasPermission(permissionNameConverter.getCreateProjectAssignmentPermission())">
		<div >
<s:form cssClass="formClass">
	<s:hidden name="requirementId" id="requirementId" />
	<s:hidden name="requirementProjectId" id="requirementProjectId" />
	<s:textfield id="project_edit" name="requirementProjectName" label="Project"
		disabled="true" cssClass="dojoComboBox" />
	<sx:autocompleter id="roles_edit" list="roles" listValue="description"
		searchType="startword" listKey="code" showDownArrow="false"
		keyName="requirementRoleCode" name="requirementRoleName"
		label="Assigned Role" />
	<sx:datetimepicker id="fromDate_req_edit" name="requirementFromDate"
		label="Start Date" displayFormat="dd/MM/yyyy" />
	<sx:datetimepicker id="toDate_req_edit" name="requirementToDate"
		label="End Date" displayFormat="dd/MM/yyyy" />
	<s:textfield id="req_percentage_edit" label="Percentage (% FTE)" name="requirementPercentage"
		cssClass="dojoComboBox" />

	<table >
		<tr align="left">
			<th colspan="2"><label class="label">Skills:</label>
			</th>
		</tr>
		<tr>
			<td valign="top" colspan="1"><jsp:useBean id="skillFormEdit"
					class="org.vectrics.recruiter.struts.cv.SkillForm" scope="request" />
				<table width="100%">
					<tr>
						<td valign="middle">
							<div class="DynamicTree" style="border: 1px solid #D9D9D9;">
								<div class="wrap" id="tree">

									<%
									    // recorremos los skills padres - SKP1
									        // Los skill se cargan solo en 3 niveles como maximo.
									        for (Skill parentSkill : parentSkills) {

									            if ((parentSkill.getChildSkills() != null) && !parentSkill.getChildSkills().isEmpty()) {
									%>
									<div class="folder">
										<input type="checkbox" name="padre" value=""
											disabled="disabled" /><%=parentSkill.getName()%>

										<%
										    // recorremos los skills hijos - SKC1

										                Collection<Skill> skillsSubCategoriaAux = parentSkill.getChildSkills();
										                Set<Skill> skillsSubCategoria = new TreeSet<Skill>(skillsSubCategoriaAux);
										                for (Skill skill : skillsSubCategoria) {
										                    // si no tiene hijos lo dibujo
										                    if ((skill.getChildSkills() == null) || skill.getChildSkills().isEmpty()) {
										 							final Long idSkill = skill.getId();
										                        Predicate preSkill = new Predicate() {
										                            public boolean evaluate(Object objeto) {
										                                RequirementSkills skillPre = (RequirementSkills) objeto;
										                                return (skillPre.getSkill().getId().equals(idSkill));
										                            }
										                        };

										                        RequirementSkills skillEncontrado = (RequirementSkills) CollectionUtils
										                                .find(requirementSkills, preSkill);
										%>
										<%
										    if (skillEncontrado != null) {
										                            if (skill.getType() == SkillType.LEVELED_TYPE) {
										%>
										<div class="doc">
											<input type="checkbox"
												name="skill_<%=skillEncontrado.getSkill().getId()%>"
												value="<%=skill.getId()%>" checked="checked" /><%=skill.getName()%>
											<input type="hidden" id="l_<%=skill.getId()%>"
												value="<%=skillEncontrado.getLevel().getId()%>" />
										</div>
										<%
										    } else {
										%>

										<div class="doc boolean">
											<input type="checkbox" id="skill_<%=skillEncontrado.getSkill().getId()%>"
												name="skill_<%=skillEncontrado.getSkill().getId()%>"
												value="<%=skill.getId()%>" checked="checked" /><%=skill.getName()%>
										</div>
										<%
										    }
										                        } else {  
										                        	if (skill.getType() == SkillType.LEVELED_TYPE) {
										%>
										<div class="doc">
											<input type="checkbox" name="skill_<%=skill.getId()%>"
												value="<%=skill.getId()%>" /><%=skill.getName()%>
											<input type="hidden" id="l_<%=skill.getId()%>" value="0" />
										</div>

										<%
										    } else {
										%>
										<div class="doc boolean">
											<input type="checkbox" name="skill_<%=skill.getId()%>"
												value="<%=skill.getId()%>" /><%=skill.getName()%>
										</div>
										<%
										    }
										                        }
										                        } else {
										                        //Si tiene hijos lo muestro y muestro sus hijos
										%>
										<div class="folder">
											<input type="checkbox" name="padre" value=""
												disabled="disabled" /><%=skill.getName()%>
											<%

											                        Collection<Skill> skillsAux = skill.getChildSkills();
											                        Set<Skill> skills = new TreeSet<Skill>(skillsAux);
											                        for (Skill child : skills) {
											                            final Long idSkill = child.getId();
										                        Predicate preSkill = new Predicate() {
										                            public boolean evaluate(Object objeto) {
										                                RequirementSkills skillPre = (RequirementSkills) objeto;
										                                return (skillPre.getSkill().getId().equals(idSkill));
										                            }
										                        };

										                        RequirementSkills skillEncontrado = (RequirementSkills) CollectionUtils
										                                .find(requirementSkills, preSkill);
											%>
											<div class="doc">
												<%
												    if (skillEncontrado != null) {
												%>
												<input type="checkbox" id="skill_<%=skillEncontrado.getSkill().getId()%>"
													name="skill_<%=skillEncontrado.getSkill().getId()%>"
													value="<%=child.getId()%>" checked="checked" /><%=child.getName()%>
												<input type="hidden" id="l_<%=child.getId()%>"
													value="<%=skillEncontrado.getLevel().getId()%>" />
												<%
												    } else {
												%>
												<input type="checkbox" name="skill_<%=child.getId()%>"
													value="<%=child.getId()%>" /><%=child.getName()%>
												<input type="hidden" id="l_<%=child.getId()%>" value="0" />
												<%
												    }
												%>
											</div>
											<%
											    }
											%>
										</div>
										<%
										    }
										                } // END SKC1
										%>
									</div>
									<%
									    } // END IF
									        } // END SKP1
									%>
								</div>
							</div></td>
					</tr>
				</table>
				<div style="display: none;" id="divLevel">
					<select name="level" id="level">
						<%
					    // recorremos y armamos los options del combo level
					    for (Level level : levels) {
					%>
						<option value="<%=level.getId()%>"
						<% if (level.getName().equalsIgnoreCase("Intermediate")){ %>
							selected="selected"
							<% }%>
						><%=level.getName()%></option>
						<%
					}
					%>
					</select>
				</div> <script type="text/javascript">
					var tree = new DynamicTree("tree");
					tree.init();
				</script>
			</td>
		</tr>
		</table>
				<table>
					<tr><td><br/></td></tr>
					<tr><td>
						<table><tr><td>
									<s:submit key="Ok" cssClass="btn"
											cssStyle="align:left" id="okbtn"
											action="RequirementAction_saveRequirement" />
						</td></tr></table>
						</td><td>
							<table><tr><td>
									<input type="button" value="Cancel" class="btn"
										onclick="$('#dialogEditReq').dialog('close');" />
							</td></tr></table>
					</td></tr>
				</table>
			</s:form>
		</div>

	</s:if>
	<s:else>
		<br />
		<p>You don't have enough permissions to create assignments.</p>

		<input type="button" value="Close" class="btn"
			style="text-align: center"
			onclick="$('#dialogEditReq').dialog('close');" />
	</s:else>
</div>